<template>
  <div class="setting-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <el-icon><Setting /></el-icon>
            系统设置
          </h1>
          <p class="page-desc">个性化配置您的系统外观和功能</p>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="saveAllSettings">
            <el-icon><Check /></el-icon>
            保存所有设置
          </el-button>
          <el-button @click="resetToDefault">
            <el-icon><Refresh /></el-icon>
            恢复默认
          </el-button>
        </div>
      </div>
    </div>

    <!-- 设置内容 -->
    <div class="setting-content">
      <el-row :gutter="24">
        <!-- 主题设置 -->
        <el-col :span="12">
          <el-card class="setting-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Brush /></el-icon>
                <span>主题设置</span>
              </div>
            </template>
            
            <div class="setting-section">
              <h3>主题颜色</h3>
              <div class="color-picker-section">
                <div class="color-options">
                  <div
                    v-for="theme in themeColors"
                    :key="theme.name"
                    class="color-option"
                    :class="{ active: currentTheme === theme.name }"
                    @click="selectTheme(theme.name)"
                  >
                    <div class="color-preview" :style="{ backgroundColor: theme.primary }"></div>
                    <div class="color-info">
                      <span class="color-name">{{ theme.label }}</span>
                      <span class="color-value">{{ theme.primary }}</span>
                    </div>
                  </div>
                </div>
                
                <div class="custom-color-section">
                  <h4>自定义颜色</h4>
                  <div class="color-inputs">
                    <div class="color-input-item">
                      <label>主色调</label>
                      <el-color-picker v-model="customPrimaryColor" @change="updateCustomTheme" />
                    </div>
                    <div class="color-input-item">
                      <label>侧边栏背景</label>
                      <el-color-picker v-model="customSidebarColor" @change="updateCustomTheme" />
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="setting-section">
              <h3>显示模式</h3>
              <div class="mode-options">
                <el-radio-group v-model="displayMode" @change="updateDisplayMode">
                  <el-radio-button label="light">浅色模式</el-radio-button>
                  <el-radio-button label="dark">深色模式</el-radio-button>
                  <el-radio-button label="auto">跟随系统</el-radio-button>
                </el-radio-group>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 布局设置 -->
        <el-col :span="12">
          <el-card class="setting-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Grid /></el-icon>
                <span>布局设置</span>
              </div>
            </template>
            
            <div class="setting-section">
              <h3>导航栏布局</h3>
              <div class="layout-options">
                <div
                  v-for="layout in layoutOptions"
                  :key="layout.name"
                  class="layout-option"
                  :class="{ active: currentLayout === layout.name }"
                  @click="selectLayout(layout.name)"
                >
                  <div class="layout-preview" :class="layout.previewClass">
                    <div class="preview-header"></div>
                    <div class="preview-sidebar"></div>
                    <div class="preview-content"></div>
                  </div>
                  <span class="layout-name">{{ layout.label }}</span>
                </div>
              </div>
            </div>

            <div class="setting-section">
              <h3>菜单设置</h3>
              <div class="menu-settings">
                <el-form label-position="top">
                  <el-form-item label="菜单展开方式">
                    <el-radio-group v-model="menuExpandMode">
                      <el-radio label="hover">悬停展开</el-radio>
                      <el-radio label="click">点击展开</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  
                  <el-form-item label="菜单显示图标">
                    <el-switch v-model="showMenuIcons" />
                  </el-form-item>
                  
                  <el-form-item label="固定侧边栏">
                    <el-switch v-model="fixedSidebar" />
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 系统配置 -->
      <el-row :gutter="24" style="margin-top: 24px;">
        <el-col :span="24">
          <el-card class="setting-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon><Tools /></el-icon>
                <span>系统配置</span>
              </div>
            </template>
            
            <el-row :gutter="24">
              <el-col :span="8">
                <div class="setting-section">
                  <h3>页面设置</h3>
                  <el-form label-position="top">
                    <el-form-item label="显示面包屑">
                      <el-switch v-model="showBreadCrumb" />
                    </el-form-item>
                    
                    <el-form-item label="显示面包屑图标">
                      <el-switch v-model="showBreadCrumbIcon" />
                    </el-form-item>
                    
                    <el-form-item label="开启回到顶部">
                      <el-switch v-model="useOpenBackTop" />
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
              
              <el-col :span="8">
                <div class="setting-section">
                  <h3>动画设置</h3>
                  <el-form label-position="top">
                    <el-form-item label="页面切换动画">
                      <el-switch v-model="enableTransition" />
                    </el-form-item>
                    
                    <el-form-item label="页面加载动画">
                      <el-switch v-model="openPageLoading" />
                    </el-form-item>
                    
                    <el-form-item label="顶部进度条">
                      <el-switch v-model="openNProgress" />
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
              
              <el-col :span="8">
                <div class="setting-section">
                  <h3>缓存设置</h3>
                  <el-form label-position="top">
                    <el-form-item label="开启页面缓存">
                      <el-switch v-model="openKeepAlive" />
                    </el-form-item>
                    
                    <el-form-item label="自动锁屏时间(分钟)">
                      <el-input-number 
                        v-model="lockTime" 
                        :min="0" 
                        :max="1440"
                        :step="5"
                        style="width: 100%"
                      />
                    </el-form-item>
                    
                    <el-form-item label="切换页面时清除消息">
                      <el-switch v-model="closeMessageOnSwitch" />
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 预览区域 -->
    <div class="preview-section">
      <el-card class="preview-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><View /></el-icon>
            <span>实时预览</span>
          </div>
        </template>
        
        <div class="preview-container">
          <div class="preview-frame" :class="currentLayout">
            <div class="preview-header" :style="{ backgroundColor: currentPrimaryColor }">
              <div class="preview-logo">RBAC-Admin</div>
              <div class="preview-nav">
                <div class="preview-nav-item"></div>
                <div class="preview-nav-item"></div>
                <div class="preview-nav-item"></div>
              </div>
            </div>
            <div class="preview-sidebar" :style="{ backgroundColor: currentSidebarColor }">
              <div class="preview-menu-item"></div>
              <div class="preview-menu-item"></div>
              <div class="preview-menu-item"></div>
            </div>
            <div class="preview-main">
              <div class="preview-content">
                <div class="preview-breadcrumb"></div>
                <div class="preview-page-content">
                  <div class="preview-card-demo"></div>
                  <div class="preview-card-demo"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Setting, 
  Check, 
  Refresh, 
  Brush, 
  Grid, 
  Tools, 
  View 
} from '@element-plus/icons-vue'

// 主题颜色配置
const themeColors = ref([
  { name: 'blue', label: '经典蓝', primary: '#3498db', sidebar: '#17553b' },
  { name: 'green', label: '清新绿', primary: '#2ecc71', sidebar: '#27ae60' },
  { name: 'purple', label: '优雅紫', primary: '#9b59b6', sidebar: '#8e44ad' },
  { name: 'orange', label: '活力橙', primary: '#e67e22', sidebar: '#d35400' },
  { name: 'red', label: '热情红', primary: '#e74c3c', sidebar: '#c0392b' },
  { name: 'teal', label: '科技青', primary: '#1abc9c', sidebar: '#16a085' }
])

// 布局选项
const layoutOptions = ref([
  { name: 'default', label: '经典布局', previewClass: 'layout-default' },
  { name: 'top', label: '顶部导航', previewClass: 'layout-top' },
  { name: 'sidebar', label: '侧边导航', previewClass: 'layout-sidebar' },
  { name: 'mix', label: '混合布局', previewClass: 'layout-mix' }
])

// 响应式数据
const currentTheme = ref('blue')
const currentLayout = ref('default')
const displayMode = ref('light')
const customPrimaryColor = ref('#3498db')
const customSidebarColor = ref('#17553b')

// 菜单设置
const menuExpandMode = ref('click')
const showMenuIcons = ref(true)
const fixedSidebar = ref(true)

// 系统配置
const showBreadCrumb = ref(false)
const showBreadCrumbIcon = ref(true)
const useOpenBackTop = ref(true)
const enableTransition = ref(true)
const openPageLoading = ref(true)
const openNProgress = ref(true)
const openKeepAlive = ref(true)
const lockTime = ref(0)
const closeMessageOnSwitch = ref(true)

// 计算属性
const currentPrimaryColor = computed(() => {
  if (currentTheme.value === 'custom') {
    return customPrimaryColor.value
  }
  const theme = themeColors.value.find(t => t.name === currentTheme.value)
  return theme ? theme.primary : '#3498db'
})

const currentSidebarColor = computed(() => {
  if (currentTheme.value === 'custom') {
    return customSidebarColor.value
  }
  const theme = themeColors.value.find(t => t.name === currentTheme.value)
  return theme ? theme.sidebar : '#17553b'
})

// 方法
const selectTheme = (themeName: string) => {
  currentTheme.value = themeName
  applyTheme()
}

const selectLayout = (layoutName: string) => {
  currentLayout.value = layoutName
  applyLayout()
}

const updateCustomTheme = () => {
  currentTheme.value = 'custom'
  applyTheme()
}

const updateDisplayMode = () => {
  applyDisplayMode()
}

const applyTheme = () => {
  // 应用主题颜色到CSS变量
  const root = document.documentElement
  root.style.setProperty('--primary-color', currentPrimaryColor.value)
  root.style.setProperty('--sidebar-bg-color', currentSidebarColor.value)
  
  // 保存到localStorage
  localStorage.setItem('theme', currentTheme.value)
  localStorage.setItem('primaryColor', currentPrimaryColor.value)
  localStorage.setItem('sidebarColor', currentSidebarColor.value)
}

const applyLayout = () => {
  // 应用布局设置
  localStorage.setItem('layout', currentLayout.value)
}

const applyDisplayMode = () => {
  // 应用显示模式
  localStorage.setItem('displayMode', displayMode.value)
  
  if (displayMode.value === 'dark') {
    document.body.classList.add('dark-mode')
  } else {
    document.body.classList.remove('dark-mode')
  }
}

const saveAllSettings = async () => {
  try {
    // 保存所有设置
    const settings = {
      theme: currentTheme.value,
      layout: currentLayout.value,
      displayMode: displayMode.value,
      primaryColor: currentPrimaryColor.value,
      sidebarColor: currentSidebarColor.value,
      menuExpandMode: menuExpandMode.value,
      showMenuIcons: showMenuIcons.value,
      fixedSidebar: fixedSidebar.value,
      showBreadCrumb: showBreadCrumb.value,
      showBreadCrumbIcon: showBreadCrumbIcon.value,
      useOpenBackTop: useOpenBackTop.value,
      enableTransition: enableTransition.value,
      openPageLoading: openPageLoading.value,
      openNProgress: openNProgress.value,
      openKeepAlive: openKeepAlive.value,
      lockTime: lockTime.value,
      closeMessageOnSwitch: closeMessageOnSwitch.value
    }
    
    localStorage.setItem('systemSettings', JSON.stringify(settings))
    
    ElMessage({
      type: 'success',
      message: '设置保存成功！'
    })
  } catch (error) {
    ElMessage({
      type: 'error',
      message: '保存设置失败，请重试'
    })
  }
}

const resetToDefault = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要恢复默认设置吗？这将清除所有自定义配置。',
      '确认重置',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 重置所有设置
    currentTheme.value = 'blue'
    currentLayout.value = 'default'
    displayMode.value = 'light'
    customPrimaryColor.value = '#3498db'
    customSidebarColor.value = '#17553b'
    menuExpandMode.value = 'click'
    showMenuIcons.value = true
    fixedSidebar.value = true
    showBreadCrumb.value = false
    showBreadCrumbIcon.value = true
    useOpenBackTop.value = true
    enableTransition.value = true
    openPageLoading.value = true
    openNProgress.value = true
    openKeepAlive.value = true
    lockTime.value = 0
    closeMessageOnSwitch.value = true
    
    // 清除localStorage
    localStorage.removeItem('systemSettings')
    localStorage.removeItem('theme')
    localStorage.removeItem('layout')
    localStorage.removeItem('displayMode')
    
    // 应用默认设置
    applyTheme()
    applyLayout()
    applyDisplayMode()
    
    ElMessage({
      type: 'success',
      message: '已恢复默认设置'
    })
  } catch {
    // 用户取消操作
  }
}

const loadSettings = () => {
  try {
    const savedSettings = localStorage.getItem('systemSettings')
    if (savedSettings) {
      const settings = JSON.parse(savedSettings)
      
      currentTheme.value = settings.theme || 'blue'
      currentLayout.value = settings.layout || 'default'
      displayMode.value = settings.displayMode || 'light'
      customPrimaryColor.value = settings.primaryColor || '#3498db'
      customSidebarColor.value = settings.sidebarColor || '#17553b'
      menuExpandMode.value = settings.menuExpandMode || 'click'
      showMenuIcons.value = settings.showMenuIcons !== undefined ? settings.showMenuIcons : true
      fixedSidebar.value = settings.fixedSidebar !== undefined ? settings.fixedSidebar : true
      showBreadCrumb.value = settings.showBreadCrumb !== undefined ? settings.showBreadCrumb : false
      showBreadCrumbIcon.value = settings.showBreadCrumbIcon !== undefined ? settings.showBreadCrumbIcon : true
      useOpenBackTop.value = settings.useOpenBackTop !== undefined ? settings.useOpenBackTop : true
      enableTransition.value = settings.enableTransition !== undefined ? settings.enableTransition : true
      openPageLoading.value = settings.openPageLoading !== undefined ? settings.openPageLoading : true
      openNProgress.value = settings.openNProgress !== undefined ? settings.openNProgress : true
      openKeepAlive.value = settings.openKeepAlive !== undefined ? settings.openKeepAlive : true
      lockTime.value = settings.lockTime || 0
      closeMessageOnSwitch.value = settings.closeMessageOnSwitch !== undefined ? settings.closeMessageOnSwitch : true
      
      // 应用设置
      applyTheme()
      applyLayout()
      applyDisplayMode()
    }
  } catch (error) {
    console.error('加载设置失败:', error)
  }
}

// 生命周期
onMounted(() => {
  loadSettings()
})
</script>

<style scoped lang="less">
.setting-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100vh;

  .page-header {
    margin-bottom: 24px;
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      background: white;
      padding: 24px;
      border-radius: 12px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
      .header-left {
        .page-title {
          display: flex;
          align-items: center;
          gap: 12px;
          margin: 0 0 8px 0;
          font-size: 28px;
          font-weight: 600;
          color: #303133;
          
          .el-icon {
            font-size: 24px;
            color: #409eff;
          }
        }
        
        .page-desc {
          margin: 0;
          color: #909399;
          font-size: 16px;
        }
      }
      
      .header-right {
        display: flex;
        gap: 12px;
      }
    }
  }

  .setting-content {
    .setting-card {
      border-radius: 12px;
      border: none;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
      :deep(.el-card__header) {
        border-bottom: 1px solid #f0f0f0;
        padding: 20px 24px;
        
        .card-header {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          
          .el-icon {
            color: #409eff;
          }
        }
      }
      
      :deep(.el-card__body) {
        padding: 24px;
      }
    }

    .setting-section {
      margin-bottom: 32px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      h3 {
        margin: 0 0 16px 0;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
      
      h4 {
        margin: 0 0 12px 0;
        font-size: 14px;
        font-weight: 600;
        color: #606266;
      }
    }

    .color-picker-section {
      .color-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 12px;
        margin-bottom: 24px;
        
        .color-option {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px;
          border: 2px solid #e4e7ed;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:hover {
            border-color: #409eff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
          }
          
          &.active {
            border-color: #409eff;
            background-color: #f0f9ff;
          }
          
          .color-preview {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }
          
          .color-info {
            display: flex;
            flex-direction: column;
            
            .color-name {
              font-size: 14px;
              font-weight: 500;
              color: #303133;
            }
            
            .color-value {
              font-size: 12px;
              color: #909399;
            }
          }
        }
      }
      
      .custom-color-section {
        .color-inputs {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
          
          .color-input-item {
            display: flex;
            flex-direction: column;
            gap: 8px;
            
            label {
              font-size: 14px;
              font-weight: 500;
              color: #606266;
            }
          }
        }
      }
    }

    .mode-options {
      .el-radio-group {
        width: 100%;
        
        .el-radio-button {
          flex: 1;
          
          :deep(.el-radio-button__inner) {
            width: 100%;
            border-radius: 6px;
          }
        }
      }
    }

    .layout-options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 16px;
      
      .layout-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 16px;
        border: 2px solid #e4e7ed;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: #409eff;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
        }
        
        &.active {
          border-color: #409eff;
          background-color: #f0f9ff;
        }
        
        .layout-preview {
          width: 100px;
          height: 60px;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          position: relative;
          overflow: hidden;
          
          &.layout-default {
            .preview-header {
              height: 20%;
              background-color: #409eff;
            }
            .preview-sidebar {
              position: absolute;
              left: 0;
              top: 20%;
              width: 25%;
              height: 80%;
              background-color: #17553b;
            }
            .preview-content {
              position: absolute;
              left: 25%;
              top: 20%;
              width: 75%;
              height: 80%;
              background-color: #f5f7fa;
            }
          }
          
          &.layout-top {
            .preview-header {
              height: 30%;
              background-color: #409eff;
            }
            .preview-content {
              position: absolute;
              left: 0;
              top: 30%;
              width: 100%;
              height: 70%;
              background-color: #f5f7fa;
            }
          }
          
          &.layout-sidebar {
            .preview-sidebar {
              position: absolute;
              left: 0;
              top: 0;
              width: 30%;
              height: 100%;
              background-color: #17553b;
            }
            .preview-content {
              position: absolute;
              left: 30%;
              top: 0;
              width: 70%;
              height: 100%;
              background-color: #f5f7fa;
            }
          }
          
          &.layout-mix {
            .preview-header {
              height: 25%;
              background-color: #409eff;
            }
            .preview-sidebar {
              position: absolute;
              left: 0;
              top: 25%;
              width: 20%;
              height: 75%;
              background-color: #17553b;
            }
            .preview-content {
              position: absolute;
              left: 20%;
              top: 25%;
              width: 80%;
              height: 75%;
              background-color: #f5f7fa;
            }
          }
        }
        
        .layout-name {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          text-align: center;
        }
      }
    }

    .menu-settings {
      .el-form {
        .el-form-item {
          margin-bottom: 20px;
          
          :deep(.el-form-item__label) {
            font-weight: 500;
            color: #606266;
          }
        }
      }
    }
  }

  .preview-section {
    margin-top: 24px;
    
    .preview-card {
      border-radius: 12px;
      border: none;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
      :deep(.el-card__header) {
        border-bottom: 1px solid #f0f0f0;
        padding: 20px 24px;
        
        .card-header {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          
          .el-icon {
            color: #409eff;
          }
        }
      }
      
      :deep(.el-card__body) {
        padding: 24px;
      }
    }
    
    .preview-container {
      display: flex;
      justify-content: center;
      
      .preview-frame {
        width: 400px;
        height: 300px;
        border: 2px solid #e4e7ed;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        
        .preview-header {
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 16px;
          color: white;
          
          .preview-logo {
            font-size: 16px;
            font-weight: 600;
          }
          
          .preview-nav {
            display: flex;
            gap: 8px;
            
            .preview-nav-item {
              width: 20px;
              height: 20px;
              background-color: rgba(255, 255, 255, 0.3);
              border-radius: 4px;
            }
          }
        }
        
        .preview-sidebar {
          width: 80px;
          height: calc(100% - 50px);
          padding: 16px 8px;
          
          .preview-menu-item {
            width: 100%;
            height: 32px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            margin-bottom: 8px;
          }
        }
        
        .preview-main {
          flex: 1;
          height: calc(100% - 50px);
          
          .preview-content {
            height: 100%;
            padding: 16px;
            background-color: #f5f7fa;
            
            .preview-breadcrumb {
              height: 20px;
              background-color: #e4e7ed;
              border-radius: 4px;
              margin-bottom: 16px;
            }
            
            .preview-page-content {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 12px;
              
              .preview-card-demo {
                height: 60px;
                background-color: white;
                border-radius: 6px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
              }
            }
          }
        }
        
        &.default {
          display: flex;
          
          .preview-sidebar {
            flex-shrink: 0;
          }
          
          .preview-main {
            flex: 1;
          }
        }
        
        &.top {
          display: flex;
          flex-direction: column;
          
          .preview-main {
            flex: 1;
          }
        }
        
        &.sidebar {
          display: flex;
          
          .preview-sidebar {
            flex-shrink: 0;
          }
          
          .preview-main {
            flex: 1;
          }
        }
        
        &.mix {
          display: flex;
          flex-direction: column;
          
          .preview-main {
            display: flex;
            flex: 1;
            
            .preview-sidebar {
              flex-shrink: 0;
            }
            
            .preview-content {
              flex: 1;
            }
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .setting-container {
    .setting-content {
      .el-row {
        .el-col {
          margin-bottom: 24px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .setting-container {
    padding: 16px;
    
    .page-header {
      .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        
        .header-left {
          .page-title {
            font-size: 24px;
          }
        }
        
        .header-right {
          width: 100%;
          justify-content: flex-end;
        }
      }
    }
    
    .setting-content {
      .color-picker-section {
        .color-options {
          grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        }
        
        .custom-color-section {
          .color-inputs {
            grid-template-columns: 1fr;
          }
        }
      }
      
      .layout-options {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      }
    }
    
    .preview-section {
      .preview-container {
        .preview-frame {
          width: 100%;
          max-width: 400px;
        }
      }
    }
  }
}

// 深色模式支持
.dark-mode {
  .setting-container {
    background-color: #1a1a1a;
    
    .page-header {
      .header-content {
        background-color: #2d2d2d;
        
        .header-left {
          .page-title {
            color: #ffffff;
          }
          
          .page-desc {
            color: #a0a0a0;
          }
        }
      }
    }
    
    .setting-card {
      background-color: #2d2d2d;
      
      :deep(.el-card__header) {
        border-bottom-color: #404040;
        
        .card-header {
          color: #ffffff;
        }
      }
    }
    
    .setting-section {
      h3 {
        color: #ffffff;
      }
      
      h4 {
        color: #c0c0c0;
      }
    }
  }
}
</style>
